function submitTest() {
    var form = document.getElementById("myForm");
    //提交表单
    form.submit();
}

function preventSubmit() {
    var form = document.getElementById("myForm");
    EventUtil.addHandler(form, "submit", function (event) {
        //取得事件对象
        event = EventUtil.getEvent(event);
        //阻止默认事件
        EventUtil.preventDefault(event);
    });
}

function resetTest() {
    var form = document.getElementById("myForm");
    //重置表单
    form.reset();
}

function preventReset() {
    var form = document.getElementById("myForm");
    EventUtil.addHandler(form, "reset", function (event) {
        //取得事件对象
        event = EventUtil.getEvent(event);
        //阻止表单重置
        EventUtil.preventDefault(event);
    });
}

function elementsTest() {
    var form = document.getElementById("myForm");
    var colorFields = form.elements["color"];
    //取得表单中包含的字段的数量
    console.log(form.elements.length);
    alert("colorFields.length:" + colorFields.length); //3
    var firstColorField = colorFields[0];
    var firstFormField = form.elements[0];
    alert(firstColorField === firstFormField); //true
}

function modifyValueTest() {
    var form = document.getElementById("myForm");
    var field = form.elements[5];
    //修改value 属性
    field.value = "Another value";
    //检查form 属性的值
    alert(field.form === form); //true
    //把焦点设置到当前字段
    field.focus();
    //禁用当前字段
    // field.disabled = true;
    //修改type 属性（不推荐，但对<input>来说是可行的）
    field.type = "checkbox";
}

function submitMoreTest() {
    var form = document.getElementById("myForm");
    //避免多次提交表单
    EventUtil.addHandler(form, "submit", function (event) {
        event = EventUtil.getEvent(event);
        var target = EventUtil.getTarget(event);
        //取得提交按钮
        var btn = target.elements["submit-btn"];
        //禁用它
        btn.disabled = true;
    });
}

function focusTest() {
    var textbox = document.forms[0].elements[4];
    EventUtil.addHandler(textbox, "focus", function (event) {
        event = EventUtil.getEvent(event);
        var target = EventUtil.getTarget(event);
        if (target.style.backgroundColor !== "red") {
            target.style.backgroundColor = "yellow";
        }
    });
    EventUtil.addHandler(textbox, "blur", function (event) {
        event = EventUtil.getEvent(event);
        var target = EventUtil.getTarget(event);
        if (/[^\d]/.test(target.value)) {
            target.style.backgroundColor = "red";
        } else {
            target.style.backgroundColor = "";
        }
    });
    EventUtil.addHandler(textbox, "change", function (event) {
        event = EventUtil.getEvent(event);
        var target = EventUtil.getTarget(event);
        if (/[^\d]/.test(target.value)) {
            target.style.backgroundColor = "red";
        } else {
            target.style.backgroundColor = "";
        }
    });
}

function selectTest() {
    var textbox = document.forms[0].elements["textbox1"];
    EventUtil.addHandler(textbox, "focus", function (event) {
        event = EventUtil.getEvent(event);
        var target = EventUtil.getTarget(event);
        target.select();
    });
}

function selectText(textbox, startIndex, stopIndex) {
    if (textbox.setSelectionRange) {
        textbox.setSelectionRange(startIndex, stopIndex);
    } else if (textbox.createTextRange) {
        var range = textbox.createTextRange();
        range.collapse(true);
        range.moveStart("character", startIndex);
        range.moveEnd("character", stopIndex - startIndex);
        range.select();
    }
    textbox.focus();
}

function selectTextTest() {
    var textbox = document.forms[0].elements["textbox1"];
    textbox.value = "Hello world!";
    //选择所有文本
    selectText(textbox, 0, textbox.value.length); //"Hello world!"
    //选择前3 个字符
    selectText(textbox, 0, 3); //"Hel"
    //选择第4 到第6 个字符
    selectText(textbox, 4, 7); //"o w"
}

function preventInputTest() {
    var textbox = document.forms[0].elements["textbox1"];
    EventUtil.addHandler(textbox, "keypress", function (event) {
        event = EventUtil.getEvent(event);
        var target = EventUtil.getTarget(event);
        var charCode = EventUtil.getCharCode(event);
        if (!/\d/.test(String.fromCharCode(charCode)) && charCode > 9 &&
            !event.ctrlKey) {
            EventUtil.preventDefault(event);
        }
    });
}

function selectionTest() {
    var selectbox = document.forms[1].elements["location"];
    //推荐
    var text = selectbox.options[selectbox.selectedIndex].text; //选项的文本
    var value = selectbox.options[selectbox.selectedIndex].value; //选项的值
    alert("text:" + text + "\nvalue:" + value);
}

function addSelectOptionTest() {
    var selectbox = document.forms[1].elements["location"];
    var newOption = new Option("Option text", "Option value");
    selectbox.add(newOption, undefined);
}

//表单序列化
function serialize(form) {
    var parts = [],
        field = null,
        i,
        len,
        j,
        optLen,
        option,
        optValue;
    for (i = 0, len = form.elements.length; i < len; i++) {
        field = form.elements[i];
        switch (field.type) {
            case "select-one":
            case "select-multiple":
                if (field.name.length) {
                    for (j = 0, optLen = field.options.length; j < optLen; j++) {
                        option = field.options[j];
                        if (option.selected) {
                            optValue = "";
                            if (option.hasAttribute) {
                                optValue = (option.hasAttribute("value") ?
                                    option.value : option.text);
                            } else {
                                optValue = (option.attributes["value"].specified ?
                                    option.value : option.text);
                            }
                            parts.push(encodeURIComponent(field.name) + "=" +
                                encodeURIComponent(optValue));
                        }
                    }
                }
                break;
            case undefined: //字段集
            case "file": //文件输入
            case "submit": //提交按钮
            case "reset": //重置按钮
            case "button": //自定义按钮
                break;
            case "radio": //单选按钮
            case "checkbox": //复选框
                if (!field.checked) {
                    break;
                }
            /* 执行默认操作 */
            default:
                //不包含没有名字的表单字段
                if (field.name.length) {
                    parts.push(encodeURIComponent(field.name) + "=" +
                        encodeURIComponent(field.value));
                }
        }
    }
    return parts.join("&");
}

function serializeTest() {
    var form = document.getElementById("myForm");
    console.log(serialize(form));
}

function boldTest() {
    //转换粗体文本
    document.execCommand("bold", false, null);
    frames["richedit"].document.execCommand("bold", false, null);
}

function italicTest() {
    //转换斜体文本
    document.execCommand("italic", false, null);
    frames["richedit"].document.execCommand("italic", false, null);
}

function createlinkTest() {
    //创建指向www.baidu.com 的链接
    var link = "https://www.baidu.com";
    document.execCommand("createlink", false, link);
    frames["richedit"].document.execCommand("createlink", false, link);
}

function formatblockTest() {
    //格式化为1 级标题
    document.execCommand("formatblock", false, "<h1>");
    frames["richedit"].document.execCommand("formatblock", false, "<h1>");
}

function selectRangeTest() {
    var selection = frames["richedit"].getSelection();
    //取得选择的文本
    var selectedText = selection.toString();
    console.log(selectedText);
    //取得代表选区的范围
    var range = selection.getRangeAt(0);
    //突出显示选择的文本
    var span = frames["richedit"].document.createElement("span");
    span.style.backgroundColor = "yellow";
    range.surroundContents(span);
}


EventUtil.addHandler(window, "load", function () {
    frames["richedit"].document.designMode = "on";
});
var div = document.getElementById("richedit");
div.contentEditable = "true";
focusTest();
selectTest();